/*
 * @Description: 卡申请页面，只需要填写姓名和身份证
 * @Author: yingying.fan
 * @Date: 2019-04-08 18:42:35
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-04-08 18:42:35
 */
<template>
  <div>
    <name-input
      ref="nameInput"
      class="input-line-1"
      :readonly="hasUserInfo"
    ></name-input>
    <id-input
      ref="idInput"
      :readonly="hasUserInfo"
    ></id-input>
    <button
      class="fontsize28 baseBgColorWithActive submit-btn"
      @click="submit"
    >提交</button>
    <p class="apply-hint">{{hint}}</p>
  </div>
</template>

<script>
import { isAndroid, getUrlParams } from 'vue-xiaobu-utils'
// import { open } from '@/utils/JumpUtils.js'
// import NameInput from '../components/input/NameInput'
// import IdInput from '../components/input/IdInput'
import InfoNameInput from '../../changeindentityinfo/components/infoinputitem/InfoNameInput'
import InfoIdInput from '../../changeindentityinfo/components/infoinputitem/InfoIdInput'
import { getVCardApplyInfo, applyCardWithoutVerify } from '../api/api.js'
export default {
  name: 'ApplyLevel1',
  components: {
    'name-input': InfoNameInput,
    'id-input': InfoIdInput
  },
  data() {
    return {
      cardInstanceId: 'jhx_buscard',
      cardName: window.buscardName,
      btnClicked: false,
      deviceInfo: null,
      hasUserInfo: false,
      hint: ''
    }
  },
  mounted() {
    let cardId = getUrlParams()['cardinstanceid']
    if (cardId) {
      this.cardInstanceId = cardId
    }
    // 进入云卡申请页埋点
    this.doCardRecord('smartcard_apply_enter')
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      // 获取用户信息，如果有的话代表该用户曾经开通过云卡，信息不可变动
      getVCardApplyInfo().then(infos => {
        // this.hint = `注：当前信息为首次开通${this.cardName}时提交的信息。如需修改个人信息可在钱包中的添加银行卡页面，选择“身份信息变更”，完成修改。`
        this.hint = `注：当前信息为注销${this.cardName}时留存的信息。如需修改个人信息可在钱包中的添加银行卡页面，选择“变更身份信息”，完成修改。`
        this.hasUserInfo = true
        this.$refs.nameInput.text = infos[0]
        this.$refs.idInput.text = infos[1]
      }).catch(() => {
        this.hint = `注：${this.cardName}开通即绑定您的身份证，一个账号只能开通一张${this.cardName}，请输入本人身份证号以便为您提供后续服务`
      })
    },
    submit() {
      if (this.btnClicked) {
        return
      }
      this.btnClicked = true
      Promise.all([this.$refs.nameInput.valid(), this.$refs.idInput.valid()]).then(data => {
        applyCardWithoutVerify(data[0], data[1], this.cardInstanceId).then(() => {
          // console.log('审核通过啦~111111')
          // 云卡申请成功埋点
          // this.doCardRecord('smartcard_apply_success')
          this.goToApplySuccess()
        }).catch(error => {
          if (!error.errCode) {
            let errCode = error.error.data.RSPCD + ''
            let errMsg = error.error.data.RSPMSG
            if (errCode === 'CARD100101') {
              // 云卡申请成功埋点
              this.doCardRecord('smartcard_apply_success')
              // 提示该错误，代表用户之前已经申请成功了，只是网络超时，导致无法正确返回
              console.log(errMsg)
              this.goToApplySuccess()
            } else {
              this.$toastMsg(errMsg)
            }
          }
          this.btnClicked = false
        })
      }).catch(error => {
        console.log('错误', error)
        this.$toastMsg(error.message)
        this.btnClicked = false
      })
    },
    // 跳转到申请成功页面
    goToApplySuccess() {
      // open('applysuccess.html?_bbv=false')
      this.$router.push('/ApplySuccessLevel1')
    },
    doCardRecord(eventId) {
      this.getDeviceInfo().then(deviceInfo => {
        this.doRecordEvent(eventId, deviceInfo)
      })
    },
    getDeviceInfo() {
      return new Promise((resolve, reject) => {
        if (this.deviceInfo) {
          resolve(this.deviceInfo)
        } else {
          this.$System.then(System => {
            System.getDeviceInfo(result => {
              result = JSON.parse(result)
              this.deviceInfo = {
                MOBILE_VERSION: result.ver // 操作系统版本
              }
              System.getAppVersionInfo(versionInfo => {
                versionInfo = JSON.parse(versionInfo)
                let version = 'version' + versionInfo.version + ' (build' + versionInfo.build + ') ' + versionInfo.type
                this.deviceInfo.APP_VERSION = version // app版本
                this.deviceInfo.MOBILE_MODEL = isAndroid() ? 1 : 0 // 操作系统,安卓或苹果
                resolve(this.deviceInfo)
              }, err => {
                console.error(err)
              })
            }, error => {
              console.error(error)
            })
          })
        }
      })
    },
    doRecordEvent(eventId, eventInfo) {
      this.$ThirdParty.then(ThirdParty => {
        ThirdParty.doRecordEvent(
          eventId,
          eventInfo,
          1,
          () => { },
          () => { }
        )
      })
    }
  }
}
</script>

<style scoped>
#app {
  padding: 0 30px;
}
/* .input-line {
  width: 690px !important;
  padding: 40px 0 0 0 !important;
  margin: 0 !important;
  font-size: 32px;
}
.input-line > .icon {
  margin-right: 30px !important;
}
.input-line-1 {
  padding: 80px 0 0 0 !important;
} */
.submit-btn {
  width: 690px;
  height: 80px;
  color: #ffffff;
  border: none;
  margin: 50px 0 30px 0;
  border-radius: 8px;
}
.apply-hint {
  font-size: 24px; /*px*/
  line-height: 1.4;
  color: #666;
}
</style>
